
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		 [v-cloak]{
          display: none;
        }
	</style>
</head>
<body>
	<div id="app">
		<div>父组件</div>
		<div>
			<button @click="handle">销毁</button>
		</div>
		<test-tom></test-tom>
		<test-jerry></test-jerry>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
    <script>Vue.config.productionTip = false</script>
	<script type="text/javascript">
		/*
			非父子组件间传值	（兄弟组件之间数据传递）
		*/
		// 提供事件中心
		var hub = new Vue();


		Vue.component('test-tom', {
			data: function() {
				return {
					num: 0
				}
			},
			template: `
				<div>
					<div>
						TOM:{{num}}
					</div>
					<div>
						<button @click="handle" type="">点击</button>
					</div>
				</div>
			`,
			methods: {
				handle() {
					// 触发兄弟组件的事件
					hub.$emit('jerry-event', 2);
				}
			},
			// 钩子函数 mounted 一旦被触发 就说明模板已经就绪了！
			mounted: function() {
				// 监听事件函数
				hub.$on('tom-event', (val) => {
					this.num += val;
				})
			}
		})
		// 另一个兄弟组件
		Vue.component('test-jerry', {
			data: function() {
				return {
					num: 0
				}
			},
			template: `
				<div>
					<div>
						JERRY:{{num}}
					</div>
					<div>
						<button @click="handle" type="">点击</button>
					</div>
				</div>
			`,
			methods: {
				handle() {
					// 触发兄弟组件的事件
					hub.$emit('tom-event', 1);
				}
			},
			// 钩子函数 mounted 一旦被触发 就说明模板已经就绪了！
			mounted: function() {
				// 监听事件函数
				hub.$on('jerry-event', (val) => {
					this.num += val;
				})
			}
		})
		var vm = new Vue({
			el: '#app',
			data: {
			
			},
			methods: {
				handle() {
					hub.$off('tom-event')
					hub.$off('jerry-event')
					console.log("销毁事件成功！")
				}
			}
		})
	</script>
</body>
</html>